<template>
  <view style=" background-color: #f1f1f1;">
    <!-- <view class="">退款商品</view> -->
    <!-- 商品 -->
    <view class="" style="margin-top: 20rpx;">
      <view style="padding: 0 32rpx;background-color: #fff;">
        <view class="shoop">
          <view class="shoop_tit">退款商品</view>
          <!-- v-for="(ite, ind) in obj.item" :key="ind" -->
          <view>
            <view class="picture">
              <view class="" style="margin-right: 10rpx;"><image :src="obj.goods_image" style="width: 200rpx;height: 200rpx;" mode=""></image></view>
              <view class="" style="margin-right: 10rpx;width: 350rpx;">
                <view class="picture_top">{{ obj.goods_title }}</view>
                <view class="picture_top_t">{{ obj.goods_sku[1] }}</view>
                <view class="picture_bottom_b">{{ obj.colorName }}</view>
                <view class="picture_bottom">￥{{ obj.pay_price }}</view>
              </view>
              <!--  -->
              <view class="num">×{{ obj.goods_num }}</view>
            </view>
            <!--  <view class="btn" v-show="ite.status_name == '售后中'"><view class="left" @click="afterSales(ite)" v-show="true">售后详情</view></view>
        <view class="btn" v-show="ite.status_name == '待发货' || ite.status_name == '待付款' || ite.status_name == '待收货'">
          <view class="left" @click="tuikuan(ite)" v-show="true">申请退款</view>
        </view> -->
          </view>
        </view>
      </view>
    </view>
    <!-- 退款信息 -->
    <view class="" style="margin-bottom: 20rpx; background-color: #fff;margin-top: 20rpx; padding: 20rpx 30rpx;align-items: center;">
      <view class="shoop_tit">退款信息</view>
      <view class="" style="margin-top: 35rpx;margin-bottom: 36rpx; display: flex;justify-content: space-between;">
        <view class="" style="color: #5C5A55;font-size: 28rpx;font-weight: 500;">
          货物状态
          <text style="color: #ff0000;margin-left: 10rpx;">*</text>
        </view>
        <view class="" style="display: flex;justify-content: space-between;align-items: center;" @click="showState = true">
          <view class="" style="color: #ADADAA;font-size: 28rpx;">{{ wei }}</view>
          <image style="width: 28rpx;height: 28rpx;" src="/static/lzl/rightD@2x.png" mode=""></image>
        </view>
      </view>
      <view class="" style="margin-top: 35rpx;margin-bottom: 36rpx; display: flex;justify-content: space-between;">
        <view class="" style="color: #5C5A55;font-size: 28rpx;font-weight: 500;">
          退款原因
          <text style="color: #ff0000;margin-left: 10rpx;">*</text>
        </view>
        <view class="" style="display: flex;justify-content: space-between;align-items: center;" @click="showYuan = true">
          <view class="" style="color: #ADADAA;font-size: 28rpx;">{{ yuanyin }}</view>
          <image style="width: 28rpx;height: 28rpx;" src="/static/lzl/rightD@2x.png" mode=""></image>
        </view>
      </view>
      <view class="" style="margin-top: 35rpx; display: flex;justify-content: space-between;">
        <view class="" style="color: #5C5A55;font-size: 28rpx;font-weight: 500;">
          退款金额
          <text style="color: #ff0000;margin-left: 10rpx;">*</text>
        </view>
        <view class="" style="display: flex;justify-content: space-between;align-items: center;">
          <view class="" style="color: #0A0A09;font-size: 28rpx;">￥{{ obj.pay_price }}</view>
          <!-- <image style="width: 28rpx;height: 28rpx;" src="/static/lzl/rightD@2x.png" mode=""></image> -->
        </view>
      </view>
    </view>
    <!-- 联系方式 -->
    <view class="" style="margin-bottom: 20rpx; background-color: #fff;margin-top: 20rpx; padding: 20rpx 30rpx;">
      <view class="shoop_tit">联系方式</view>
      <view class="" style="margin-top: 20rpx;">
        <input style="height: 70rpx;padding-left:20rpx ;background-color: #f2f1f1;" type="num" placeholder="请输入手机号" v-model="phoen" name="" id="" />
      </view>
    </view>
    <!-- 补充描述和凭证 -->
    <view class="" style="padding: 20rpx 32rpx; margin-top: 20rpx;background-color: #fff;padding-bottom: 150rpx;">
      <view class="" style="color: #0A0A09;font-size: 32rpx;font-weight: bold;margin-bottom: 30rpx;">补充描述和凭证</view>
      <view class="" style="width: 100%;background-color: #f2f1f1;border-radius: 20rpx;">
        <view class=""><textarea style="height: 100rpx;padding: 20rpx;" v-model="textarea" placeholder="请输入....." id="" cols="30" rows="10"></textarea></view>
        <view class="">
          <view class="upload-img">
            <u-upload
              :showProgress="false"
              @on-uploaded="uploadSuccess"
              @on-remove="uploadRemove"
              :action="`${baseUrl}/api/common/upload`"
              :header="{ token: token }"
              width="140"
              height="140"
              maxCount="3"
            ></u-upload>
          </view>
        </view>
      </view>
    </view>
    <!-- 下面的按钮 -->
    <view
      class=""
      v-if="true"
      @click="requestRefund"
      style="z-index: 9999; width: 100%;height: 100rpx;background-color: #e83241;text-align: center;line-height: 100rpx;color: #fff;font-weight: 600;font-size: 32rpx;position: fixed;bottom: 0;left: 0;"
    >
      申请退款
    </view>
    <!--    <view
      class=""
      v-else
      style="width: 100%;height: 100rpx;background-color: #b0aead;text-align: center;line-height: 100rpx;color: #fff;font-weight: 600;font-size: 32rpx;position: fixed;bottom: 0;left: 0;"
    >
      申请退款
    </view> -->
    <!-- 货物状态弹出层 -->
    <u-popup v-model="showState" mode="bottom" border-radius="20">
      <!-- style="margin-top: 10%;margin-left: 40%;transform: translateX(-10%);" -->
      <view style="padding-left: 32rpx;padding-bottom: 32rpx;">
        <u-radio-group :wrap="true" v-model="value">
          <u-radio @change="radioChange" v-for="(item, index) in list" :key="index" :name="item.value" :disabled="item.disabled">{{ item.name }}</u-radio>
        </u-radio-group>
      </view>
    </u-popup>
    <u-popup v-model="showYuan" mode="bottom" border-radius="20">
      <!-- style="margin-top: 10%;margin-left: 40%;transform: translateX(-10%);" -->
      <view style="padding-left: 32rpx;padding-bottom: 32rpx;">
        <u-radio-group :wrap="true" v-model="valeYuan">
          <u-radio @change="radioChangeYuan" v-for="(item, index) in listYuan" :key="index" :name="item.name" :disabled="item.disabled">{{ item.name }}</u-radio>
        </u-radio-group>
      </view>
    </u-popup>
  </view>
</template>

<script>
import { itemDetail, aftersale } from '@/api/api.js';
export default {
  data() {
    return {
      refundState: false,
      baseUrl: this.$baseUrl,
      token: uni.getStorageSync('token'),
      imgList: [],
      textarea: '',
      phoen: '',
      list: [
        //售后类型
        {
          name: '退款',
          value: 'refund'
        },
        {
          name: '退货',
          value: 'return'
        },
        {
          name: '其他',
          value: 'other'
        }
      ],
      listYuan: [
        {
          id: 1,
          name: '卖家发错货了'
        },
        {
          id: 2,
          name: '退运费'
        },
        {
          id: 3,
          name: '大小/重量于商品描述不符'
        },
        {
          id: 4,
          name: '生产日期、保质期与商品不符'
        },
        {
          id: 5,
          name: '质量问题'
        }
      ],
      valeYuan: '',
      // u-radio-group的v-model绑定的值如果设置为某个radio的name，就会被默认选中
      value: 'orange',
      showState: false,
      showYuan: false,
      wei: '请选择',
      morey: '200.00',
      yuanyin: '请选择',
      tuihuo: '', //退货
      order_item_id: 0,
      id: 0,
      obj: {}
    };
  },
  onLoad(options) {
    this.order_item_id = options.order_item_id;
    this.id = options.id;
    this.init({ id: this.id, order_item_id: this.order_item_id });
  },
  methods: {
    // 选中某个单选框时，由radio时触发
    radioChange(e) {
      if (e == 'refund') {
        this.wei = '退款';
      } else if (e == 'return') {
        this.wei = '退货';
      } else if (e == 'other') {
        this.wei = '其他';
      }
      this.showState = false;
    },
    radioChangeYuan(e) {
      this.yuanyin = e;
      this.showYuan = false;
    },
    // 点击申请退款
    async requestRefund() {
      let obj = {
        content: this.textarea,
        images: this.imgList,
        order_id: this.id,
        order_item_id: this.order_item_id,
        phone: this.phoen,
        reason: this.valeYuan,
        type: this.value
      };
      let n = await aftersale(obj);
      this.$msg(n.msg);
      if (n.code == 1) {
        setTimeout(() => {
          uni.redirectTo({
            url: '/pages/my/orderList/orderList'
          });
        }, 500);
      }
    },
    uploadSuccess(e) {
      this.imgList = [];
      e.forEach(item => {
        this.imgList.push(item.response.data.url);
      });
    },
    // 移除图片
    uploadRemove(index) {
      this.imgList.splice(index, 1);
    },
    async init(obj) {
      let n = await itemDetail(obj);
      this.obj = n.data;
      // this.ordersList.forEach(item => {
      let color = this.obj.goods_sku_text.split('#');
      let col = '#' + color[1];
      this.obj.color = col;
      this.obj.colorName = color[0];
      // });
    }

    // 选中任一radio时，由radio-group触发
    // radioGroupChange(e) {
    //   console.log(e);
    // }
  }
};
</script>

<style lang="scss">
* {
  box-sizing: border-box;
}
.upload-img {
  padding: 25rpx;

  .upload-title {
    font-size: 28rpx;
  }
}
/deep/ .u-radio {
  margin-top: 50rpx;
}
.shoop_tit {
  font-size: 32rpx;
  font-family: PingFang SC-Bold, PingFang SC;
  font-weight: bold;
  color: #0a0a09;
}
.picture {
  margin-top: 20rpx;
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 20rpx;
  border-bottom: 2rpx solid #f2f1f1;
  .picture_top {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    -o-text-overflow: ellipsis;
    font-size: 32rpx;
    font-family: PingFang SC-Bold, PingFang SC;
    font-weight: bold;
    color: #0a0a09;
  }
  .picture_top_t {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    -o-text-overflow: ellipsis;
    margin-top: 20rpx;
    font-size: 24rpx;
    font-family: PingFang SC-Regular, PingFang SC;
    font-weight: 400;
    color: #5c5a55;
  }
  .picture_bottom_b {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    -o-text-overflow: ellipsis;
    margin-top: 20rpx;
    font-size: 24rpx;
    font-family: PingFang SC-Regular, PingFang SC;
    font-weight: 400;
    color: #5c5a55;
  }
  .picture_bottom {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    -o-text-overflow: ellipsis;
    margin-top: 20rpx;
    font-size: 32rpx;
    font-family: PingFang SC-Bold, PingFang SC;
    font-weight: bold;
    color: #e83241;
  }
  .num {
    font-size: 24rpx;
    font-family: PingFang SC-Medium, PingFang SC;
    font-weight: 500;
    color: #cccccc;
  }
}
</style>
